<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="header-title">健康中心</text>
    </view>

    <!-- 健康概览卡片 -->
    <view class="health-overview">
      <view class="overview-item">
        <text class="item-value">{{ healthData.steps }}</text>
        <text class="item-label">今日步数</text>
      </view>
      <view class="overview-item">
        <text class="item-value">{{ healthData.heartRate }}</text>
        <text class="item-label">心率(bpm)</text>
      </view>
      <view class="overview-item">
        <text class="item-value">{{ healthData.sleep }}h</text>
        <text class="item-label">睡眠时长</text>
      </view>
      <view class="overview-item">
        <text class="item-value">{{ healthData.water }}杯</text>
        <text class="item-label">饮水量</text>
      </view>
    </view>


    <!-- 健康建议 -->
    <view class="health-advice">
      <view class="section-title">
        <text>健康建议</text>
      </view>
      <view class="advice-list">
        <view class="advice-item" v-for="(advice, index) in healthAdvices" :key="index">
          <view class="advice-icon" :style="{ backgroundColor: advice.color }">
            <text class="advice-icon-text">{{ advice.icon }}</text>
          </view>
          <view class="advice-content">
            <text class="advice-title">{{ advice.title }}</text>
            <text class="advice-desc">{{ advice.desc }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 健康资讯 -->
    <view class="health-news">
      <view class="section-title">
        <text>健康资讯</text>
      </view>
      <view class="news-list">
        <view class="news-item" v-for="(news, index) in healthNews" :key="index" @click="viewNews(news)">
          <image :src="news.image" class="news-image" mode="aspectFill"></image>
          <view class="news-content">
            <text class="news-title">{{ news.title }}</text>
            <view class="news-meta">
              <text class="news-date">{{ news.date }}</text>
              <text class="news-read">{{ news.readCount }}人已读</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue'

export default {
  components: {
    'l-echart': LEchart
  },
  data() {
    return {
      healthData: {
        steps: 8560,
        heartRate: 72,
        sleep: 7.5,
        water: 6
      },
      healthAdvices: [
        {
          icon: '🏃',
          title: '增加运动量',
          desc: '建议每天步行10000步以上',
          color: '#FFD700'
        },
        {
          icon: '🥗',
          title: '均衡饮食',
          desc: '多吃蔬菜水果，控制油盐摄入',
          color: '#90EE90'
        },
        {
          icon: '😴',
          title: '规律作息',
          desc: '建议每天23点前入睡，保证8小时睡眠',
          color: '#87CEEB'
        }
      ],
      healthNews: [
        {
          id: 1,
          title: '夏季养生保健小常识',
          image: 'https://seopic.699pic.com/photo/50072/9270.jpg_wh1200.jpg',
          date: '2023-06-15',
          readCount: 1280
        },
        {
          id: 2,
          title: '心血管疾病预防指南',
          image: 'https://bpic.588ku.com/back_pic/06/19/62/89638b0b57b8148.jpg',
          date: '2023-06-10',
          readCount: 956
        },
        {
          id: 3,
          title: '心理健康不容忽视',
          image: 'https://img95.699pic.com/photo/40012/5045.jpg_wh860.jpg',
          date: '2023-06-05',
          readCount: 2103
        },
        {
          id: 4,
          title: '老年人骨质疏松防治',
          image: 'https://img95.699pic.com/photo/60065/0086.jpg_wh860.jpg',
          date: '2023-05-28',
          readCount: 1654
        },
        {
          id: 5,
          title: '儿童疫苗接种注意事项',
          image: 'https://img95.699pic.com/photo/50050/3689.jpg_wh860.jpg',
          date: '2023-05-20',
          readCount: 3241
        },
        {
          id: 6,
          title: '办公室人群颈椎病预防',
          image: 'https://img95.699pic.com/photo/50100/5009.jpg_wh860.jpg',
          date: '2023-05-15',
          readCount: 2876
        }
      ]
    };
  },
  methods: {
    initChart() {
      const chart = this.$refs.chartRef;
      if (chart) {
        chart.setOption(this.chartOptions);
      }
    },
    viewNews(news) {
      // 跳转到新闻详情页
      uni.navigateTo({
        url: `/pages/healthy/newsDetail?id=${news.id}`
      });
    }
  },
  mounted() {
    // 初始化图表
    this.$nextTick(() => {
      this.initChart();
    });
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.health-overview {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.overview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.item-label {
  font-size: 24rpx;
  color: #999;
}

.health-index {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 8rpx solid #007aff;
}

.index-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index-chart {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
}

.index-info {
  text-align: center;
}

.index-score {
  font-size: 48rpx;
  font-weight: bold;
  color: #007aff;
}

.index-desc {
  font-size: 28rpx;
  color: #666;
}

.health-advice {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.advice-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.advice-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
}

.advice-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  font-size: 36rpx;
}

.advice-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.advice-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.advice-desc {
  font-size: 24rpx;
  color: #666;
}

.health-news {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.news-item {
  display: flex;
  gap: 20rpx;
}

.news-image {
  width: 180rpx;
  height: 140rpx;
  border-radius: 12rpx;
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.news-meta {
  display: flex;
  justify-content: space-between;
}

.news-date, .news-read {
  font-size: 20rpx;
  color: #999;
}
</style>